<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>DOMValidator Example</title>
        <style type="text/css" media="screen">
        <!--
        body { background:#fff;color:#000;font:12px tahoma,'trebuchet ms', sans-serif; }
        h1 { font:300% georgia,times,serif; margin: 0 0 18px; text-align: center;}
		p {margin: 0 0 5px; clear: left;}
		label {width: 120px;float: left;clear: left;text-align: right;padding-right: 5px;}
		input {border: 1px solid black; padding: 2px; width: 148px;margin: 0 0 5px;float: left;}
        .error{background: #fff url('images/exclamation.png') no-repeat 2px 50%; padding-left: 20px; width: 130px;}
        .valid{background: #fff url('images/accept.png') no-repeat 2px 50%; padding-left: 20px; width: 130px;}
        .docValid{background-color: #00F;}
		#errors {clear: left;}
		#doc {width: 400px; margin: 0 auto; background: #eee; padding: 12px;}
		#footer, #desc {text-align: center; font-size: 10px; margin-top: 4px; clear: left;}
        -->
        </style>
     	<script src="DOMAssistant/DOMAssistant.js" type="text/javascript" charset="utf-8"></script>
     	<script src="DOMAssistant/DOMAssistantContent.js" type="text/javascript" charset="utf-8"></script>
     	<script src="DOMAssistant/DOMAssistantCSS.js" type="text/javascript" charset="utf-8"></script>
     	<script src="DOMAssistant/DOMAssistantEvents.js" type="text/javascript" charset="utf-8"></script>
     	<script src="DOMAssistant/DOMAssistantLoad.js" type="text/javascript" charset="utf-8"></script>
     	<script src="../src/DOMValidator.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        <!--
		DOMAssistant.DOMReady(function(){
			$$('ett').setValidator({msg: $$('errors'), tag: 'li', call: $$('tva'), req:'Obligatoriskt f\u00E4lt', max:[5,'Lite m\u00E5nga tecken va?']}).addEvent('keyup', function() {
				$$(this).validate();
			});
			$$('tva').setValidator({msg: $$('errors'), tag: 'li', equal:[$$('ett'),'St\u00E4mmer ej \u00F6verens'], req:'Obligatoriskt f\u00E4lt', max:[5,'Lite m\u00E5nga tecken va?']}).addEvent('keyup', function() {
				$$(this).validate();
			});
			/*$$('tva').setValidator({valid:$$('doc'), classValid:'docValid', equal:[$$('ett'),'St\u00E4mmer ej \u00F6verens'], req:'Obligatoriskt f\u00E4lt', max:[3,'Lite m\u00E5nga tecken va?']}).addEvent('keyup', function() {
				$$(this).validate();
			});*/
			$$('custom').setValidator({custom: [function(v) {
				if (v === 'test') {
					return true;
				}
				return false;
			}, 'Det där är väl inte \'test\'?']}).addEvent('keyup', function() {
				$$(this).validate();
			});
			$$('regexp').setValidator({
				req: 'Obligatoriskt f\u00E4lt',
				regexp: [/^[0-9-]+$/i, 'Enbart siffror och bindestreck!']
			}).addEvent('keyup', function() {
				$$(this).validate();
			});
			$('input.req').setValidator({req:'Obligatoriskt f\u00E4lt'}).addEvent('keyup', function() {
				$$(this).validate();
			});
			$('input.int').setValidator({number:'M\u00E5ste vara nummer', classValid:false}).addEvent('keyup', function() {
				$$(this).validate();
			});
			//$('input').validate();
		});
        //-->
        </script>
    </head>
    <body id="test">
        <div id="doc">
            <h1>DOMValidator Example</h1>
            <div>
				<label for="ett">Password*</label>
            	<input id="ett" type="password" name="ett" />
            </div>
            <div>
				<label for="tva">Repeat Password*</label>
            	<input id="tva" type="password" name="tva" />
            </div>
            <div>
				<label for="name">Name*</label>
            	<input type="text" name="name" id="name" class="req" />
        	</div>
            <div>
				<label for="name">Write 'test'*</label>
            	<input type="text" name="custom" id="custom" />
        	</div>
            <div>
				<label for="name">Regexp*</label>
            	<input type="text" name="regexp" id="regexp" />
        	</div>
            <div>
				<label for="idnr">ID-number</label>
            	<input type="text" name="idnr" id="idnr" class="int" />
        	</div>
        	<ul id="errors"></ul>
			<div id="desc">* = required fields. Password should be between 1 and 5 characters.</div>
        </div>
		<div id="footer">
			Source code and manual: <a href="http://kodfabrik.se/misc/domvalidator/">http://kodfabrik.se/misc/domvalidator/</a><br />
			Icons used are the FamFamFan <a href="http://www.famfamfam.com/lab/icons/silk/">Silk Icons</a>.
		</div>
    </body>
</html>